<template>
  <!-- //! 车型管理的样式 -->
  <!-- //! 车型管理的样式 -->
  <!-- //! 车型管理的样式 -->
  <!-- //! 车型管理的样式 -->
  <!-- //! 车型管理的样式 -->

  <div class="branches">
    <div class="app-container">
      <!-- 上 -->
      <div class="top background">
        <div id="topForm">
          <el-form id="searchForm" ref="searchFormRef" label-position="right" label-width="80px" :model="searchForm">
            <div id="elForm">
              <el-form-item label="车型编号">
                <el-input v-model="searchForm.id" />
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="应载重量">
                <el-select v-model="searchForm.allowableLoad" placeholder="请选择" style="width:323px">
                  <el-option
                    v-for="item in allowableLoadList"
                    :key="item.index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="应载体积">
                <el-select v-model="searchForm.allowableVolume" placeholder="请选择" style="width:323px">
                  <el-option
                    v-for="item in allowableVolume"
                    :key="item.index"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div id="elForm">
              <el-form-item label="车辆类型">
                <el-input v-model="searchForm.name" />
              </el-form-item>
            </div>
            <div class="flex-container"> <!-- 添加一个包装容器 -->
              <el-button type="primary" style="flex-shrink: 0; flex: none;" @click="searchCar">搜索</el-button>
              <el-button type="primary" style="flex-shrink: 0; flex: none;" @click="resetSearch">重置</el-button>
            </div>
          </el-form>

        </div>
      </div>
      <!-- 下 -->
      <div class="button background">
        <div id="form2">
          <!-- 按钮 -->
          <el-button type="primary" style="margin-bottom:20px" @click="showDialog">新增车型</el-button>
          <!-- 表单 -->
          <el-table
            style="width: 100%"
            :data="carList"
          >
            <el-table-column
              label="序号"
              width="100"
              type="index"
            />
            <el-table-column
              prop="id"
              label="车型编号"
              width="180"
            />
            <el-table-column
              prop="name"
              label="车辆类型"
            />
            <el-table-column
              prop="num"
              label="车型数量"
            />
            <el-table-column
              prop="allowableLoad"
              label="应载重量（吨）"
            />
            <el-table-column
              prop="allowableVolume"
              label="应载体积（立方米）"
            />
            <el-table-column
              prop="measureLong"
              label="长（米）"
            />
            <el-table-column
              prop="measureWidth"
              label="宽（米）"
            />
            <el-table-column
              prop="measureHigh"
              label="高（米）"
            />
            <el-table-column
              label="操作"
            >
              <template v-slot="{row}">
                <el-button
                  type="text"
                  size="small"
                  @click="editCarList(row.id)"
                >编辑 |</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="delCarList(row.id)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div id="demonstration">
            <el-pagination
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(total)"
              @current-change="pageChange"
              @size-change="sizeChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        ref="addCarList"
        label-position="right"
        label-width="100px"
        :model="addCarList"
        :rules="rules"
      >
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="addCarList.name" />
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model.number="addCarList.allowableLoad">
            <template slot="append">吨</template>
          </el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model.number="addCarList.allowableVolume">
            <template slot="append">体积</template>
          </el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input v-model.number="addCarList.measureLong">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model.number="addCarList.measureWidth">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input v-model.number="addCarList.measureHigh">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quitForm">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addCar, delCarApi, getCarApi, getCarDetailApi, updateCarApi } from '@/api/vehicle'
export default {
  data() {
    return {

      carId: 0, // 车辆id，用于编辑使用
      title: '新增车型',
      dialogVisible: false,
      carList: [],
      pageParams: {
        page: 1,
        pageSize: 10
      },
      total: 0, // 总条数
      addCarList: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        name: '', // 车辆类型名称
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '' // 宽
      }, // ? 添加车辆信息
      searchForm: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        name: '', // 车辆类型名称
        id: '' // 车辆类型编号
      }, // ? 车型搜索功能
      rules: {
        allowableLoad: [
          { required: true, message: '请输入准载重量', trigger: 'blur' },
          { type: 'number', message: '准载重量必须为数字值' }
        ],
        allowableVolume: [
          { required: true, message: '请输入准载体积', trigger: 'blur' },
          { type: 'number', message: '准载体积必须为数字值' }
        ],
        name: [
          { required: true, message: '请输入车辆类型名称', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '请输入车辆类型高', trigger: 'blur' },
          { type: 'number', message: '车辆类型高必须为数字值' }
        ],
        measureLong: [
          { required: true, message: '请输入车辆类型长', trigger: 'blur' },
          { type: 'number', message: '车辆类型长必须为数字值' }
        ],
        measureWidth: [
          { required: true, message: '请输入车辆类型宽', trigger: 'blur' },
          { type: 'number', message: '车辆类型宽必须为数字值' }
        ]
      },
      allowableLoadList: [{
        value: 'RANGE_LEVEL_1',
        name: '<1.8（吨）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '1.8-6（吨）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '6-14（吨）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '14-30（吨）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '30-50（吨）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '50-100（吨）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '100>（吨）'
      }], // ! 准载重量下拉框数据
      allowableVolume: [{
        value: 'RANGE_LEVEL_1',
        name: '<3（m³）'
      },
      {
        value: 'RANGE_LEVEL_2',
        name: '3-5（m³）'
      },
      {
        value: 'RANGE_LEVEL_3',
        name: '5-10（m³）'
      },
      {
        value: 'RANGE_LEVEL_4',
        name: '10-15（m³）'
      },
      {
        value: 'RANGE_LEVEL_5',
        name: '15-30（m³）'
      },
      {
        value: 'RANGE_LEVEL_6',
        name: '30-50（m³）'
      },
      {
        value: 'RANGE_LEVEL_7',
        name: '50-80（m³）'
      },
      {
        value: 'RANGE_LEVEL_8',
        name: '80-150（m³）'
      },
      {
        value: 'RANGE_LEVEL_9',
        name: '150>（m³）'
      }]// ! 准载体积下拉框数据

    }
  },
  created() {
    this.getCarList()
    // this.getCarDropDownList()
  },
  methods: {
    // todo 渲染车型列表数据
    async getCarList() {
      const res = await getCarApi({ ...this.searchForm, ...this.pageParams })
      console.log(res)
      this.total = res.data.counts
      this.carList = res.data.items
      // console.log(this.carList)
    },
    // todo 点击显示模态框
    showDialog() {
      this.title = '新增车型'
      this.dialogVisible = true
    },
    // todo 提交添加车辆信息
    async submitForm() {
      // 校验表单
      await this.$refs.addCarList.validate()
      if (this.title === '新增车型') {
        await addCar(this.addCarList)
        // console.log(res)
        // 提示
        this.$message.success('新增车型成功')
        // 关闭模态框
        this.dialogVisible = false
        // 重新获取列表数据
        this.getCarList()
      } else if (this.title === '编辑车型') {
        await updateCarApi({ ...this.addCarList, id: this.carId })
        // console.log(res)
        // 提示
        this.$message.success('编辑车型成功')
        // 关闭模态框
        this.dialogVisible = false
        // 重新获取列表数据
        this.getCarList()
      }
      // 重置表单
      this.$refs.addCarList.resetFields()
    },
    // todo 取消添加
    quitForm() {
      this.$refs.addCarList.resetFields() // 重置表单
      this.dialogVisible = false
    },
    // todo 点击重置搜索信息
    resetSearch() {
      this.$refs.searchFormRef.resetFields()
      this.searchForm.allowableLoad = ''
      this.searchForm.allowableVolume = ''
      // 重新渲染列表
      this.getCarList()
    },
    // todo 点击搜索车辆
    async searchCar() {
      const res = await getCarApi({ ...this.searchForm, page: this.pageParams.page, pageSize: this.pageParams.pageSize })
      console.log(res)
      // 更新数据
      this.carList = res.data.items
      this.total = res.data.counts
    },
    // todo 删除车辆
    async delCarList(id) {
      // console.log(id)
      await delCarApi(id)
      // console.log(res)
      // 提示
      this.$message.success('删除成功')
      // 重新获取列表数据
      this.getCarList()
    },
    // todo 编辑编辑按钮回显数据
    async editCarList(id) {
      // 显示模态框
      this.title = '编辑车型'
      this.dialogVisible = true
      const res = await getCarDetailApi(id)
      console.log(res)
      // 数据回填
      this.addCarList = res.data
      this.carId = id
    },
    // todo 点击分页
    async pageChange(newPage) {
      console.log(newPage)
      this.pageParams.page = newPage
      this.getCarList()
    },
    // todo 每页条数改变
    sizeChange(newSize) {
      this.pageParams.pageSize = newSize
      this.getCarList()
    }

  }
}
</script>

  <style scoped>
  /* 表单二 */
  #form2{
    padding: 20px;

  }
  #demonstration{
    text-align: center;
    margin-top: 20px;
  }
  /* 表单一 */
.flex-container{
  padding-right: 765px;
}
  #searchForm{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* 居中 */
    padding-top: 20px;
  }
  .branches{
    margin-left: 10px;
    margin-right: 10px;
  }
  .background{
    background: #ffffff;
    margin-top: 25px;
  }
  .top{
    height: 140px;
  }
  /* .button{
    height:700px ;
  } */
  .el-input{
    width: 308px;
  }
  #elForm{
    margin: 0 30px 0 30px;
  }
  </style>

